<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-between;
        align-items: center;
        margin-right: 20%;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div>
        <Tabs type="card">
            <Tab-pane label="查看总战备金储备量">
                <div style="width:300px;padding: 5px;background: #eeeeee">
                    <Card :bordered="false">
                        <p slot="title">战备金储备量</p>
                        <p style="font-size: 20px">{{moneyTotal}}</p>
                    </Card>
                </div>
            </Tab-pane>
            <Tab-pane label="设置战备金储备量信息">
                <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                    <Form-item label="当前战备金数值" prop="money">
                        <i-input v-model="formValidate.money" placeholder="请输入当前战备金数值"></i-input>
                    </Form-item>
                    <selectSearch :selectBaseInfo="selectBaseInfo" @post-data="getCompentensData"></selectSearch>

                    <Form-item>
                        <i-button @click="handleSubmit('formValidate')" type="primary">提交</i-button>
                        <!--<i-button type="ghost" style="margin-left: 8px">取消</i-button>-->
                    </Form-item>
                </i-form>
            </Tab-pane>
            <Tab-pane label="查看指定机构的战备金储备量信息">
                <i-form ref="formValidate2" :model="formValidate2" :rules="ruleValidate2" :label-width="100">
                    <selectSearch :selectBaseInfo="selectBaseInfo2" @post-data="getCompentensData2"></selectSearch>
                    <Form-item>
                        <i-button @click="handleSubmit2('formValidate2')" type="primary">提交</i-button>
                        <!--<i-button type="ghost" style="margin-left: 8px">取消</i-button>-->
                    </Form-item>
                </i-form>
            </Tab-pane>
        </Tabs>
        <!--<div class="action-cell">-->
        <!--<div class="list-action-btn">-->
        <!--<Button type="error" size="large" @click="addIsShow =true">添加油料类型</Button>-->
        <!--</div>-->
        <!--</div>-->
        <!--<Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>-->
        <!--<Modal v-model="addIsShow" title="添加" @on-ok="handleSubmit('formValidate')"-->
        <!--@on-cancel="setPwdIsShow =false">-->
        <!--<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">-->
        <!--<Form-item label="油料类型" prop="oiltype">-->
        <!--<i-input v-model="formValidate.oiltype" placeholder="请输入油料类型"></i-input>-->
        <!--</Form-item>-->
        <!--</Form>-->
        <!--</Modal>-->
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import selectSearch from '../../components/selectSearch';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                //添加
                formValidate: {
                    //添加字段
                    money: '',
                },
                addIsShow: false,
                ruleValidate: {},
                //选择部门
                selectBaseInfo: {
                    "title": '选择组织',
                    "placeholder": '请输入所在组织名称',
                    "postUrl": apiUtil.urls.OrganSearch,
                },
                reqpeopleDept: '',

                //选择部门查看储备金
                formValidate2: {
                    //添加字段
                },
                ruleValidate2: {},
                selectBaseInfo2: {
                    "title": '选择查询组织',
                    "placeholder": '请输入所在组织名称',
                    "postUrl": apiUtil.urls.OrganSearch,
                },
                reqpeopleDept2: '',
                //总数量
                moneyTotal: '',
                //列表
                tableColumns: [
                    {
                        title: '油料类型',
                        key: 'Value',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {

                            return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.row)
                                            }
                                        }
                                    }, '删除'),

                                ]
                            )

                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
            this.getDataTotal();
        },
        components: {
            selectSearch
        },
        methods: {

            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.comfirmModifyPS(model);
                })
            },
            //获取选择搜索组件传来结果数据
            getCompentensData: function (value) {
                this.reqpeopleDept = value;
            },

            comfirmModifyPS: function (model) {
                let that = this;
                model.orgId = this.reqpeopleDept.resultId;
                let params = that.$qs.stringify(model);
                apiUtil.post(that, apiUtil.urls.SetZbMoney, params, function (res) {
                    // that.mockTableData();
                    that.$Notice.open({
                        title: '通知',
                        desc: '添加成功 ',
                        duration: 0
                    });
                });
            },
            handleSubmit2(name) {
                this.comfirmModifyPS2()
            },
            //获取选择搜索组件传来结果数据
            getCompentensData2: function (value) {
                this.reqpeopleDept2 = value;
                console.log('reqpeopleDept2:', this.reqpeopleDept2)
            },

            comfirmModifyPS2: function () {
                let that = this;
                let model = {
                    orgId: this.reqpeopleDept2.resultId,
                };
                let params = that.$qs.stringify(model);
                apiUtil.get(that, apiUtil.urls.GetZbMoney, model, function (res) {

                    that.$Modal.info({
                        title: '战备金储备量',
                        content: res.Msg,
                        onOk: () => {

                        },
                        onCancel: () => {

                        }

                    });
                })
            },
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id,
                            value: ''
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },
            //列表总数据
            mockTableData() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.OilTypeList, params, function (res) {
                    that.$Loading.finish();
                    that.tableData = res.Msg;

                    console.log('res:', res)
                });

            },
            getDataTotal: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetZbMoneyTotal, params, function (res) {
                    that.$Loading.finish();
                    that.moneyTotal = res.Msg;

                    console.log('res:', res)
                });
            },
            //删除
            remove(param) {
                let self = this;
                let that = this;
                this.$Modal.confirm({
                    title: '用户信息',
                    content: `是否删除此记录`,
                    onOk: function () {
                        this.$Loading.start();
                        let para = {
                            id: param.Id,
                            oiltype: param.Value,
                        };
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that, apiUtil.urls.DelOilType, params, function (res) {
                            that.mockTableData();
                        });
                    }
                })
            },
        },
    }
</script>
